<!-- 首页 -->
<template>
  <view class="content">
    <view class="text-area">
      <view class="text-area_1">
        <text class="title_1">{{title_1}}</text>
      </view>
      <view class="text-area_2">
        <text class="title_2">{{title_2}}</text>
      </view>
    </view>
    <view>
      <button class="next_button" @click="nextPage()" plain="true">
        <image src="/static/icon/next.png" mode="aspectFill" style="height: 80px; width: 80px; "></image>
      </button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title_1: '轻羽',
        title_2: '飞扬',
      }
    },
    methods: {
      nextPage() {
        uni.navigateTo({
          url: '/pages/start/permit'
        })
      }
    }
  }
</script>

<style>
  page {
    height: 100vh;
    width: 100vw;
  }

  .content {
    background-image: url();
    /* 图片素材start_1.png */
    background-size: cover;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
  }

  .text-area {
    font-size: 150rpx;
    color: #000000;
    text-shadow: 10px 5px 15px #000000;
    /* font-family: ;    ----艺术字体没弄明白怎么设置*/
  }

  .text-area_1 {
    position: absolute;
    left: 10%;
    top: 20%;
  }

  .text-area_2 {
    position: absolute;
    right: 10%;
    bottom: 20%;
  }

  .next_button {
    position: absolute;
    right: 5%;
    bottom: 5%;
  }

  button[plain] {
    /* 按钮去掉边框 */
    border: none;
    border-color: transparent;
  }
</style>